<!-- MultiModalFeatureExtractor.vue -->
<template>
  <div class="feature-extractor">
    <div class="panel-header">
      <h2><el-icon><Collection /></el-icon> 多模态特征提取器</h2>
      <div class="mode-switch">
        <el-radio-group v-model="extractionMode" size="small">
          <el-radio-button label="parallel">并行处理</el-radio-button>
          <el-radio-button label="sequence">串行处理</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <div class="feature-process">
      <!-- 并行排列的信号波形和SAR图像 -->
      <div class="parallel-source-data">
        <div class="data-preview">
          <h3>原始信号波形</h3>
          <div ref="waveformChart" class="chart-container"></div>
        </div>
        <div class="data-preview">
          <h3>SAR图像数据</h3>
          <div ref="sarChart" class="chart-container"></div>
        </div>
      </div>

      <div class="processing-flow">
        <div class="flow-step" v-for="(step, idx) in processingSteps" :key="idx">
          <div class="step-icon">
            <el-icon :size="12">
              <component :is="step.icon" />
            </el-icon>
          </div>
          <div class="step-name">{{ step.name }}</div>
          <div class="step-progress">
            <el-progress
                :percentage="step.progress"
                :status="step.status"
                :stroke-width="12"
                :show-text="false"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { Collection, Setting, DataAnalysis, Picture, MagicStick } from '@element-plus/icons-vue'
import {ElIcon, ElProgress, ElRadioButton, ElRadioGroup} from "element-plus";

const extractionMode = ref('parallel')
const processingSteps = ref([
  { name: '信号预处理', icon: 'Setting', progress: 85, status: 'success' },
  { name: '频域特征提取', icon: 'DataAnalysis', progress: 70, status: 'success' },
  { name: '图像特征提取', icon: 'Picture', progress: 65, status: '' },
  { name: '特征对齐', icon: 'Connection', progress: 30, status: '' },
  { name: '多模态融合', icon: 'MagicStick', progress: 10, status: '' }
])

const waveformChart = ref(null)
const sarChart = ref(null)
let waveformInstance = null
let sarInstance = null

onMounted(() => {
  initWaveformChart()
  initSarChart()

  // 模拟进度
  const progressInterval = setInterval(() => {
    processingSteps.value.forEach((step, index) => {
      if (step.progress < 100) {
        step.progress = Math.min(step.progress + 2, 100)
        step.status = step.progress === 100 ? 'success' : ''
      }
    })
  }, 1000)

  onBeforeUnmount(() => {
    clearInterval(progressInterval)
    waveformInstance && waveformInstance.dispose()
    sarInstance && sarInstance.dispose()
  })
})

const initWaveformChart = () => {
  if (waveformChart.value) {
    waveformInstance = echarts.init(waveformChart.value, 'dark')
    const option = {
      backgroundColor: 'transparent',
      grid: {
        left: '3%',
        right: '4%',
        bottom: '8%',
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: Array.from({length: 200}, (_, i) => i),
        axisLine: { lineStyle: { color: '#5a7cc9' } },
        splitLine: { show: false },
        axisLabel: { show: false }
      },
      yAxis: {
        type: 'value',
        axisLine: { show: true, lineStyle: { color: '#5a7cc9' } },
        splitLine: { lineStyle: { color: 'rgba(93, 102, 224, 0.1)' } }
      },
      series: [{
        data: Array.from({length: 200}, () => Math.random() * 40 - 20),
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#4fa6ff'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(79, 166, 255, 0.4)' },
            { offset: 1, color: 'rgba(79, 166, 255, 0.1)' }
          ])
        }
      }],
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(16, 26, 48, 0.9)',
        borderColor: '#4db8ff',
        textStyle: { color: '#e4f0ff' }
      }
    }
    waveformInstance.setOption(option)
  }
}

const initSarChart = () => {
  if (sarChart.value) {
    sarInstance = echarts.init(sarChart.value, 'dark')
    const option = {
      backgroundColor: 'transparent',
      grid: {
        left: '3%',
        right: '4%',
        bottom: '8%',
        top: '10%'
      },
      xAxis: {
        type: 'category',
        show: false
      },
      yAxis: {
        type: 'category',
        show: false
      },
      visualMap: {
        min: 0,
        max: 100,
        show: false,
        calculable: true,
        inRange: {
          color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
      },
      series: [{
        type: 'heatmap',
        data: Array.from({length: 1000}, () => [
          Math.floor(Math.random() * 50),
          Math.floor(Math.random() * 50),
          Math.floor(Math.random() * 100)
        ]),
        itemStyle: {
          borderColor: 'rgba(10, 20, 40, 0.5)',
          borderWidth: 1
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        }
      }],
      tooltip: {
        position: 'top',
        formatter: function(params) {
          return `SAR强度: ${params.value[2]}<br>坐标: [${params.value[0]}, ${params.value[1]}]`
        }
      }
    }
    sarInstance.setOption(option)
  }
}
</script>

<style scoped>
.feature-extractor {
  display: flex;
  flex-direction: column;
  height: 40vh;
  background: rgba(16, 26, 48, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(93, 102, 224, 0.3);
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(65, 128, 240, 0.15);
  padding: 1.5vh 1.5vw;
  transition: all 0.3s ease;
}

.feature-extractor:hover {
  box-shadow: 0 0 30px rgba(93, 102, 224, 0.25);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.panel-header h2 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #4db8ff;
}

.mode-switch {
  background: rgba(25, 40, 80, 0.6);
  border-radius: 6px;
  padding: 4px;
  border: 1px solid rgba(93, 102, 224, 0.3);
}

.feature-process {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2vh;
}

.parallel-source-data {
  display: flex;
  gap: 1.5vw;
  height: 20vh; /* 调整高度 */
}

.parallel-source-data > .data-preview {
  flex: 1;
  background: rgba(12, 20, 40, 0.5);
  border-radius: 8px;
  padding: 1vh 1vw;
}

.data-preview h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 1vh;
  color: #c0d1ff;
}

.processing-flow {
  display: flex;
  justify-content: space-between;
  padding: 0.8vh 0;
  height: 10vh;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18%;
  background: rgba(20, 30, 60, 0.6);
  border-radius: 6px;
  padding: 1vh 0.8vw;
  border: 1px solid rgba(93, 102, 224, 0.2);
  transition: all 0.3s ease;
}

.flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 5px 15px rgba(93, 102, 224, 0.2);
  border-color: rgba(93, 102, 224, 0.5);
}

.step-icon {
  font-size: 1.1rem;
  margin-bottom: 0.8vh;
  color: #4db8ff;
}

.step-name {
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 0.5vh;
  color: #a0bff0;
}

.step-progress {
  width: 100%;
  padding: 0 0.5vw;
}

.chart-container {
  height: calc(100% - 2rem);
  width: 100%;
}
</style>